<!--
 * @Author: duchengdong
 * @Date: 2022-01-05 15:27:43
 * @LastEditors: duchengdong
 * @LastEditTime: 2022-01-05 18:37:26
 * @Description: 
-->
<template>
	<view class="container">
		<g-ec-canvas class="uni-ec-canvas" :canvasId="canvasId" :ec="ec" @init="init"></g-ec-canvas>
	</view>
</template>

<script>
import {diningTimeArr} from './data.js'
export default {
	props: {
		id: {
			type: String,
			default: 'blood-circle-id',
		},
		canvasId: {
			type: String,
			default: 'blood-circle',
		},
		chartData: {
			type: Object,
			default: {
				bloodSugarNum: 0,
				code: 11,
			},
		},
	},
	data() {
		let option = this.updateChartOption(this.chartData)
		return {
			ec: {
				option: option,
			},
		}
	},
	watch: {
		chartData: {
			deep: true,
			handler(newV, oldV) {
				console.log(newV, '****')
				this.ec.option = this.updateChartOption(newV)
			},
		},
	},
	methods: {
		updateChartOption(chartData) {
			if (!chartData) return
			const {bloodSugarNum, code} = chartData
			const obj = diningTimeArr.find(v => v.code == code)
			let colorStops
			if (obj) {
				const curRange = obj.range.find(v => bloodSugarNum >= v.min && bloodSugarNum < v.max)
				colorStops = curRange.sendColor
			}
			var option = {
				series: [
					{
						type: 'gauge',
						radius: '100%',
						startAngle: 225,
						endAngle: -45,
						min: 0,
						max: 30,
						splitNumber: 100,
						progress: {
							show: true,
							roundCap: true,
							width: 12,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: colorStops,
									global: false, // 缺省为 false
								},
							},
						},
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 12,
							},
						},
						pointer: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						title: {
							show: false,
						},
						data: [
							{
								value: chartData.bloodSugarNum,
								detail: {
									show: false,
								},
							},
						],
					},
				],
			}
			return option
		},
		init(res) {
			console.log(res, '----')
		},
	},
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
	display: block;
}
</style>
